<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>树组件</title>
<link rel="stylesheet" href="lib/layui/css/layui.css">
<script src="lib/layui/layui.js"></script>
</head>
<body>
	<!-- 添加 -->
	<div style="display: none;" id="myDiv">
		<form class="layui-form" id="myForm" onsubmit="return false;">
			<input type="text" name="id" style="display: none;" />
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 模块名称:</label>
				<div class="layui-input-inline">
					<input type="text" name="title" class="layui-input"
						lay-verify="required" placeholder="">
				</div>
			</div>
			<div style="display: none;" class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 父模块编号:</label>
				<div class="layui-input-inline">
					<input type="text" name="ParentId" lay-verify="required"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 模块路径:</label>
				<div class="layui-input-inline">
					<input type="text" name="Path" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 模块权重:</label>
				<div class="layui-input-inline">
					<input type="text" name="Weight" lay-verify="required"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<button class="layui-btn" id="bc" lay-filter="bc" lay-submit="">
					保存</button>
			</div>
		</form>
	</div>

	<!-- 编辑 -->
	<div style="display: none;" id="myDivSet">
		<form class="layui-form" lay-filter="myFormVal" id="myFormSet"
			onsubmit="return false;">
			<input type="text" name="id" style="display: none;" />
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 模块名称:</label>
				<div class="layui-input-inline">
					<input type="text" name="title" class="layui-input"
						lay-verify="required" placeholder="">
				</div>
			</div>

			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 父模块名称:</label>
				<div class="layui-input-inline">
					<select class="ParentId" name="parentId">
						<option value="">请选择状态</option>
						<option value="0">父节点</option>
					</select>
				</div>
			</div>

			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 模块路径:</label>
				<div class="layui-input-inline">
					<input type="text" name="path" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="level-name" class="layui-form-label"> 模块权重:</label>
				<div class="layui-input-inline">
					<input type="text" name="weight" lay-verify="required"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<button type="submit" class="layui-btn" lay-submit=""
					id="updateModules" lay-filter="updateModules">修改</button>
			</div>
		</form>
	</div>

	<div id="test1"></div>
	<script type="text/javascript">
  		var tree,layer,$,form;
		layui.use(['tree','layer','form'], function(){
		    tree = layui.tree;
		   	layer = layui.layer;
		   	form = layui.form;
		   	$ = layui.$;
		   	
		   	$.post("selTree",{},function(data){
		   		tree.render({
			      elem: '#test1'  //绑定元素
			      ,data: data
			      ,id: 'demoId' //定义索引
			      ,showLine: false  //是否开启连接线
			      ,edit: ['add', 'update', 'del']
			      ,click: function(obj){
				      console.log(obj);
				      var data = obj.data;  
      				  layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
				    }
				  ,customOperate: true
				  ,operate: function(obj){
					    var type = obj.type; //得到操作类型：add、edit、del
					    var data = obj.data; //得到当前节点的数据
					    var elem = obj.elem; //得到当前节点元素
					    
					    //Ajax 操作
					    var id = data.id; //得到节点索引
					    if(type === 'add'){ //增加节点
					    	$("#myForm input[name='ParentId']").val(id);
					    	$("#myForm input[name='title']").val('');
					    	$("#myForm input[name='Path']").val('');
					    	$("#myForm input[name='Weight']").val('');
							layer.open({
								type: 1,
								title: "添加",
								area: ['400px', '350px'],
								content: $("#myDiv")
							});
					    } else if(type === 'update'){ //修改节点
					    	console.log(data);
					    	form.val("myFormVal",data);
					    	layer.open({
								type: 1,
								title: "修改",
								area: ['400px', '350px'],
								content: $("#myDivSet")
							});
					    } else if(type === 'del'){ //删除节点
							
							$.post("getAll",{moduleId:id},function(res){
			    				if(res.code=="0"){
			    					layer.msg("您要删除的包含了角色,不可删除!!!");
			    				}else{
			    					$.post("delTree",{id:id},function(res){
			      						if(res.code=="0"){
			      							layer.msg(res.msg);
			      							layer.closeAll();
			      							location.reload();
							      		}else{
							      			layer.msg("删除失败");
							      		}
							      },"json");
			    				}
			    			},"json");
												    	
					    };
					  }
			    });
		   	},"json");
		    
		  $.post("getParentId",{},function(res){
		  	console.log(res);
		  	for(var i=0;i<res.length;i++){
		  		$(".ParentId").append(`
					<option value="${res[i].id}">${res[i].title}</option>
				`);
		  	}
		  	form.render('select');
		  },"json");
		    
		     form.on('submit(bc)', function(data){
		    	$.post("addTree",$("#myForm").serialize(),function(res){
			    	if(res.code=="0"){
			    		layer.msg(res.msg)
			    		layer.closeAll()
			    		location.reload();
			    	}else{
			    		layer.msg(res.msg)
			    	}
		    	},"json")
		  		return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});
    
    
		    form.on('submit(updateModules)', function(data){
		    	$.post("updateTree",$("#myFormSet").serialize(),function(res){
			    	if(res.code=="0"){
			    		layer.msg(res.msg)
			    		layer.closeAll()
			    		location.reload();
			    	}else{
			    		layer.msg(res.msg)
			    	}
		    	},"json")
		  		return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});

		});
  	</script>
</body>
</html>